<script>
import {debounce} from "@/util";
import {resetBgToFront} from "@/components/PicEdit/util";
import {instance} from "@/util/canvasEditor";
import {typeMap} from './config'
export default {
  name: "Layer",
  inject: ['canvas'],
  computed: {
    _canvas() {
      return this.canvas()
    }
  },
  data() {
    return {
      typeMap,
      modalCahce: {},
      list: [],
      currentIndex: -1,
      renderDebounce: debounce(() => {
        if (this._canvas) {
          this.getLayerList()
          this.setCurrenIndex()
        }
      }, 100)
    }
  },
  destroyed() {
    this._canvas.discardActiveObject();
  },
  mounted() {
    // console.log(this.canvasProvide)
    console.log(this._canvas)
    if (this._canvas) {
      this._canvas.on('after:render', this.renderDebounce)
      this._canvas.on('mouse:down', this.handleMouseUp)
    }
  },
  methods: {
    handleGetObjects() {

      return this._canvas.getObjects().filter(item => item.id !== 'backgroundImage').reverse()
    },
    handleGetActiveObjectIndex() {
      const activeObject = this._canvas.getActiveObject()
      return this.handleGetObjects().findIndex(obj => obj.id === activeObject.id)
    },
    setCurrenIndex() {
      const activeObject = this._canvas.getActiveObject()
      if (activeObject) {
        this.currentIndex = this.handleGetActiveObjectIndex(activeObject)
      } else {
        this.currentIndex = -1
      }
    },
    handleMouseUp() {
      this.setCurrenIndex()
    },
    clearLayerList() {
      this.$set(this, 'list', [])
    },
    getLayerList() {
      const list = this.handleGetObjects()
      this.$set(this, 'list', list)
    },
    handleSetActive(item, index) {
      const info = this.handleGetObjects().find((obj) => obj.id === item.id);
      this._canvas.discardActiveObject();
      this._canvas.setActiveObject(info);
      this._canvas.requestRenderAll();
      this.currentIndex = index
      this.$emit('setEditConfig')
    },
    moveToPrevFloor() {
      const actives = this._canvas.getActiveObjects();

      if (actives && actives.length === 1) {
        const activeObject = this._canvas.getActiveObjects()[0];
        activeObject && activeObject.bringForward();
        resetBgToFront(this._canvas)
        this._canvas.renderAll();
        this.setCurrenIndex()
      }
    },
    deleteCurrent() {
      const activeObject = instance.canvas.getActiveObject()
      if (activeObject) {
        instance.canvas.remove(activeObject)
        instance.canvas.requestRenderAll()
      }

    },
    cloneCurrent()
    {
      const activeObject = instance.canvas.getActiveObject()
      if (activeObject) {
        instance.canvas.remove(activeObject)
        instance.canvas.requestRenderAll()
      }

    },
    moveToNextFloor() {

      const actives = this._canvas.getActiveObjects();
      if (actives && actives.length === 1) {
        const activeObject = this._canvas.getActiveObjects()[0];
        activeObject && activeObject.sendBackwards();
        resetBgToFront(this._canvas)
        this._canvas.renderAll();
        this.setCurrenIndex()
      }
    }
  }

}
</script>

<template>
  <div class="layer flex flex-column">
    <ul class="layer-list  flex-1">
      <li v-for="(item,index) in list" :key="index" :class="{active:currentIndex === index}" class="layer-item"
          @click="handleSetActive(item,index)">
        图层{{ index + 1 }} {{ typeMap[item.type] }}
      </li>
    </ul>
    <div class="layer-btn">
      <Row>
        <Col>
          <Button :disabled="currentIndex === -1" size="small" @click="moveToPrevFloor">移动到上一层</Button>
          <Button :disabled="currentIndex ===-1" size="small" @click="moveToNextFloor">移动到下一层</Button>
          <Button :disabled="currentIndex === -1" size="small" @click="deleteCurrent">删除元素</Button>
          <Button :disabled="currentIndex === -1" size="small" @click="cloneCurrent">复制元素</Button>
        </Col>
      </Row>
    </div>

  </div>
</template>

<style lang="scss" scoped>
.layer {
  display: flex;
  height: 100%;

  .layer-list {
    flex: 1;

    .layer-item {
      cursor: pointer;

      &.active {
        background-color: #cccccc;
      }
    }
  }

  .layer-btn {

  }
}


</style>
